<template>
  <CommonPanel title="告警区域排名">
    <template #opt>
      <div>
        <CustomBtn
          v-for="(i, v) in btnList"
          :key="v"
          @click="customActive(v)"
          :active="v === index ? true : false"
        >
          {{ i.name }}</CustomBtn
        >
      </div>
    </template>
    <div class="rank-box">
      <RankItem
        class="rank-box_item"
        v-for="item of lists"
        :key="item.name"
        :info="item"
      />
    </div>
  </CommonPanel>
</template>

<script setup>
import * as echarts from "echarts";
import { computed, ref, onMounted, watch, reactive, onUnmounted } from "vue";
import RankItem from "../components/rank-item.vue";
import { getRegion } from "@/api/security-board";
let lists = ref([
  { name: "1", num: 20 },
  { name: "2", num: 30 },
  { name: "3", num: 40 },
  { name: "4", num: 40 },
]);
const btnList = ref([
  {
    name: "今日",
  },
  {
    name: "近一周",
  },
  {
    name: "近一月",
  },
]);
const index = ref(0);
let timer;

onMounted(() => {
  getDataList();
  timer = setInterval(getDataList, 10000);
});
onUnmounted(() => {
  clearInterval(timer);
});

function getDataList() {
  getRegion({ type: index.value + 1 + "" }).then((res) => {
    if (res.code === 1) {
      let maxNum = 0;
      res.data.forEach((i, v) => {
        if (v === 0) {
          maxNum = i.num;
        }
        i.maxNum = maxNum;
        i.index = v + 1;
      });
      lists.value = res.data;
    }
  });
}
function customActive(v) {
  clearInterval(timer);
  index.value = v;
  getDataList();
  timer = setInterval(getDataList, 10000);
}
</script>

<style lang="scss" scoped>
.rank-box {
  height: 100%;
  padding: 16px 6px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;

  &_item {
    flex: 1;
  }
}
</style>
